<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Locale" %>
<%--
  Created by IntelliJ IDEA.
  User: 11065
  Date: 2021/11/1
  Time: 9:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>车票</title>
</head>
<body onload="loadData()">
<div>
    <a href="/" style="margin-top: 5px;text-align: right"><h4>退出</h4></a>
</div>
<div align="center">
    <div>
        <div style="display: inline ; margin-left: -2%">
            <label style="font-weight: 550">起点站：</label>
                <input style="background-color: azure" type="text" name="search_b" list="sblist" id="search_b"/>
                <datalist id="sblist">
                    <option>北京</option>
                    <option>上海</option>
                    <option>十堰</option>
                </datalist>
        </div>
        <div style="display: inline; margin-left: 2%">
            <label style="font-weight: 550">终点站：</label>
                <input style="background-color: azure" type="text" name="search_e" list="selist" id="search_e"/>
                <datalist id="selist">
                    <option>北京</option>
                    <option>上海</option>
                    <option>十堰</option>
                </datalist>
        </div>
        <div style="display: inline; margin-left: 3%">
            <label style="font-weight: 550">日期：</label>
                <input style="background-color: azure" type="date" name="search_t"  id="search_t"/>
            <div style="display: inline; margin-left: 3.5%">
                <button onclick="search()" style="font-weight:550; background-color:cornflowerblue;
                        width:60px; height:30px; font-size: 16.5px">查询</button>
            </div>
            <div style="display: inline">
                <button onclick="flush()" style="font-weight:550; background-color:lightgreen;
                        width:60px; height:30px; font-size: 16.5px">重置</button>
            </div>
        </div>
    </div>
</div>
<div id="table">
    <div class="header">
        <h1 style="font-size:25px;text-align:center;line-height:50px">车票列表</h1>
    </div>
    <div style="text-align: center">
        <table align='center' border='1' cellspacing='0' style="width:60%" id="order">
            <thead>
            <tr style="background-color: gainsboro">
                <td>起点站</td>
                <td>终点站</td>
                <td>出发时间</td>
                <td>到达时间</td>
                <td>列车号</td>
                <td>座位号</td>
                <td>座位类型</td>
                <td>价格</td>
                <td>操作</td>
            </tr>
            </thead>
        </table>
    </div>
</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/plugins/bootstrapValidator/bootstrapValidator.min.js"></script>
<script scr="/js/libs/Format.js"></script>
<script scr="/js/libs/DateFormat.js"></script>
<script scr="/js/libs/SimpleDateFormat.js"></script>
<script>
    function loadData() {
        $.ajax({
            type: 'post',
            url: 'getAllTicket',
            dataType: 'json',
            success:function(data) {
                if(data.code == 200){
                    console.log(data);
                    var dataResult = data.data;
                    $("#table tbody").html("");
                    $("#order").append("<tbody>");
                    for (var i = 0;i<dataResult.length;i++){
                        var json = JSON.stringify(dataResult[i]);
                        $("#order").append(
                            "<tr style='background-color: antiquewhite'>" +
                            "<td>" + dataResult[i].起点站+"</td>" +
                            "<td>" + dataResult[i].终点站+"</td>" +
                            "<td>" + dataResult[i].出发时间+"</td>" +
                            "<td>" + dataResult[i].到达时间+"</td>" +
                            "<td>" + dataResult[i].列车号+"</td>" +
                            "<td>" + dataResult[i].座位号+"</td>" +
                            "<td>" + dataResult[i].座位类型+"</td>" +
                            "<td>" + dataResult[i].价格+"</td>" +
                            "<td>" +"<button onclick='deleteTicket("+json+")' " +
                            "style='font-size: 15px; font-weight: 550; background-color: darksalmon'>"+"预定"+"</button></td>" +
                            "</tr>")
                    }
                    $("#order").append("</tbody>");
                }
            },
            error:function (xhr, textStatus, errorThrown) {
                /*错误信息处理*/
                alert("进入error---");
                alert("状态码："+xhr.status);
                alert("状态:"+xhr.readyState); //当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
                alert("错误信息:"+xhr.statusText );
                alert("返回响应信息："+xhr.responseText );//这里是详细的信息
                alert("请求状态："+textStatus);
                alert(errorThrown);
                alert("请求失败");
            }
        });
    }

    function search() {
        var bstation = $("#search_b").val();
        var estation = $("#search_e").val();
        var time = $("#search_t").val();
        $.ajax({
            type: 'post',
            url: 'searchTicket',
            data: {"出发地":bstation,"目的地":estation,"日期":time},
            dataType: 'json',
            success:function(data) {
                if(data.code == 200){
                    console.log(data);
                    var dataResult = data.data;
                    $("#table tbody").html("");
                    $("#order").append("<tbody>");
                    for (var i = 0;i<dataResult.length;i++){
                        var json = JSON.stringify(dataResult[i]);
                        $("#order").append(
                            "<tr style='background-color: antiquewhite'>" +
                            "<td>" + dataResult[i].起点站+"</td>" +
                            "<td>" + dataResult[i].终点站+"</td>" +
                            "<td>" + dataResult[i].出发时间+"</td>" +
                            "<td>" + dataResult[i].到达时间+"</td>" +
                            "<td>" + dataResult[i].列车号+"</td>" +
                            "<td>" + dataResult[i].座位号+"</td>" +
                            "<td>" + dataResult[i].座位类型+"</td>" +
                            "<td>" + dataResult[i].价格+"</td>" +
                            "<td>" +"<button onclick='deleteTicket("+dataResult[i]+")' " +
                            "style='font-size: 15px; font-weight: 550; background-color: darksalmon'>"+"预定"+"</button></td>" +
                            "</tr>")
                    }
                    $("#order").append("<tbody>");
                }
            },
            error:function (xhr, textStatus, errorThrown) {
                /*错误信息处理*/
                alert("进入error---");
                alert("状态码："+xhr.status);
                alert("状态:"+xhr.readyState); //当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
                alert("错误信息:"+xhr.statusText );
                alert("返回响应信息："+xhr.responseText );//这里是详细的信息
                alert("请求状态："+textStatus);
                alert(errorThrown);
                alert("请求失败");
            }
        })
    }

    function deleteTicket(车票){
        $.ajax({
            type: 'post',
            url: 'deleTicket',
            data: {"tic":车票.车票号},
            dataType: 'json',
            success:function(data) {
                if(data.code == 200){
                    alert("预定成功");
                    location.reload();
                }
            },
            error:function (xhr, textStatus, errorThrown) {
                /*错误信息处理*/
                alert("进入error---");
                alert("状态码："+xhr.status);
                alert("状态:"+xhr.readyState); //当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
                alert("错误信息:"+xhr.statusText );
                alert("返回响应信息："+xhr.responseText );//这里是详细的信息
                alert("请求状态："+textStatus);
                alert(errorThrown);
                alert("请求失败");
            }
        })
    }

    function flush() {
        $("#search_b").val("");
        $("#search_e").val("");
        $("#search_t").val("");
        loadData()
    }
</script>
<canvas id="cas" style="position:absolute; top:0px; left:0px; z-index:-1;"></canvas>
<script>
    var canvas = document.getElementById("cas");
    var ctx = canvas.getContext("2d");
    resize();
    window.onresize = resize;
    function resize() {
        canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }
    var RAF = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();
    var warea = {x: null, y: null, max: 20000};
    window.onmousemove = function(e) {
        e = e || window.event;
        warea.x = e.clientX;
        warea.y = e.clientY;
    };
    window.onmouseout = function(e) {
        warea.x = null;
        warea.y = null;
    };
    var dots = [];
    for (var i = 0; i < 350; i++) {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        var xa = Math.random() * 2 - 1;
        var ya = Math.random() * 2 - 1;
        dots.push({
            x: x,
            y: y,
            xa: xa,
            ya: ya,
            max: 5000
        })
    }
    setTimeout(function() {
        animate();
    }, 100);
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var ndots = [warea].concat(dots);
        dots.forEach(function(dot) {
            dot.x += dot.xa;
            dot.y += dot.ya;
            dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1;
            dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1;
            ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);
            for (var i = 0; i < ndots.length; i++) {
                var d2 = ndots[i];
                if (dot === d2 || d2.x === null || d2.y === null) continue;
                var xc = dot.x - d2.x;
                var yc = dot.y - d2.y;
                var dis = xc * xc + yc * yc;
                var ratio;
                if (dis < d2.max) {
                    if (d2 === warea && dis > (d2.max / 2)) {
                        dot.x -= xc * 0.03;
                        dot.y -= yc * 0.03;
                    }
                    ratio = (d2.max - dis) / d2.max;
                    ctx.beginPath();
                    ctx.lineWidth = ratio / 2;
                    ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';
                    ctx.moveTo(dot.x, dot.y);
                    ctx.lineTo(d2.x, d2.y);
                    ctx.stroke();
                }
            }
            ndots.splice(ndots.indexOf(dot), 1);
        });
        RAF(animate);
    }
</script>
</html>
